.navs {
  ul {
    padding: 0;
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 1em;
  }
}

.menuClass {
  position: relative;
  height: 100%;
}
@keyframes slideInLeft {
  from {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes slideInRight {
  from {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes slideLeftOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}
@keyframes slideRightOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
}
.slide-left-enter-active {
  animation: slideInLeft 0.3s forwards;
  z-index: 5;
}

.slide-left-leave-active {
  animation: slideLeftOut 0.3s forwards;
  z-index: 3;
}
.slide-right-enter-active {
  animation: slideInRight 0.3s forwards;
  z-index: 5;
}

.slide-right-leave-active {
  animation: slideRightOut 0.3s forwards;
  z-index: 3;
}

.home,
.user,
.login,
.animate {
  position: absolute;
  left: calc(50% - 200px);
}
